@import "./fab.vars";

// Floating Action Button Container
// --------------------------------------------------

ion-fab {
  position: absolute;
  z-index: $z-index-fixed-content;
}


// FAB Horizontal Positioning
// --------------------------------------------------

.fab-horizontal-left {
  // scss-lint:disable PropertySpelling
  @include multi-dir() {
    left: $fab-content-margin;

    left: calc(#{$fab-content-margin} + constant(safe-area-inset-left));
    left: calc(#{$fab-content-margin} + env(safe-area-inset-left));
  }
}

.fab-horizontal-right {
  // scss-lint:disable PropertySpelling
  @include multi-dir() {
    right: $fab-content-margin;

    right: calc(#{$fab-content-margin} + constant(safe-area-inset-right));
    right: calc(#{$fab-content-margin} + env(safe-area-inset-right));
  }
}

.fab-horizontal-center {
  @include position(null, null, null, 50%);
  @include margin-horizontal(-$fab-size / 2, null);
}

.fab-horizontal-start {
  @include position-horizontal($fab-content-margin, null);
  @include safe-position-horizontal($fab-content-margin, null);
}

.fab-horizontal-end {
  @include position-horizontal(null, $fab-content-margin);
  @include safe-position-horizontal(null, $fab-content-margin);
}


// FAB Vertical Positioning
// --------------------------------------------------

.fab-vertical-top {
  top: $fab-content-margin;

  &.fab-edge {
    top: -$fab-size / 2;
  }
}

.fab-vertical-bottom {
  bottom: $fab-content-margin;

  &.fab-edge {
    bottom: -$fab-size / 2;
  }
}

.fab-vertical-center {
  @include margin(-$fab-size / 2, null, null, null);

  top: 50%;
}
